<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>康复训练应用 - 项目预览</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            color: white;
            margin-bottom: 40px;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .app-preview {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .nav-tabs {
            display: flex;
            background: #f8f9fa;
            border-radius: 10px;
            padding: 5px;
            margin-bottom: 30px;
        }
        
        .nav-tab {
            flex: 1;
            padding: 15px;
            text-align: center;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .nav-tab.active {
            background: #667eea;
            color: white;
        }
        
        .nav-tab:hover {
            background: #e9ecef;
        }
        
        .nav-tab.active:hover {
            background: #5a6fd8;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .feature-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid #667eea;
        }
        
        .feature-card h3 {
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .code-structure {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        }
        
        .file-tree {
            font-family: 'Courier New', monospace;
            line-height: 1.6;
        }
        
        .file-tree .folder {
            color: #667eea;
            font-weight: bold;
        }
        
        .file-tree .file {
            color: #666;
        }
        
        .status-section {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .status-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            margin: 10px 0;
            background: #f8f9fa;
            border-radius: 10px;
        }
        
        .status-success {
            border-left: 4px solid #28a745;
        }
        
        .status-warning {
            border-left: 4px solid #ffc107;
        }
        
        .status-error {
            border-left: 4px solid #dc3545;
        }
        
        .badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        
        .badge-success {
            background: #d4edda;
            color: #155724;
        }
        
        .badge-warning {
            background: #fff3cd;
            color: #856404;
        }
        
        .badge-error {
            background: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🏥 康复训练应用</h1>
            <p>HarmonyOS 项目预览 - 运动损伤康复训练系统</p>
        </div>
        
        <div class="app-preview">
            <div class="nav-tabs">
                <div class="nav-tab active" onclick="showTab('overview')">项目概览</div>
                <div class="nav-tab" onclick="showTab('features')">功能模块</div>
                <div class="nav-tab" onclick="showTab('structure')">代码结构</div>
                <div class="nav-tab" onclick="showTab('status')">构建状态</div>
            </div>
            
            <div id="overview" class="tab-content active">
                <h2>📱 应用概览</h2>
                <p>这是一个基于HarmonyOS开发的运动损伤康复训练应用，旨在帮助用户进行科学的康复训练。</p>
                
                <div class="feature-grid">
                    <div class="feature-card">
                        <h3>🎯 主要目标</h3>
                        <p>为运动损伤患者提供个性化的康复训练方案，通过科学的训练指导帮助用户恢复健康。</p>
                    </div>
                    <div class="feature-card">
                        <h3>💡 核心理念</h3>
                        <p>结合现代康复医学理论，提供安全、有效、便捷的数字化康复训练解决方案。</p>
                    </div>
                    <div class="feature-card">
                        <h3>🚀 技术栈</h3>
                        <p>基于HarmonyOS ArkTS开发，采用现代化的UI设计和交互体验。</p>
                    </div>
                </div>
            </div>
            
            <div id="features" class="tab-content">
                <h2>🔧 功能模块</h2>
                
                <div class="feature-grid">
                    <div class="feature-card">
                        <h3>🏠 首页 (Index)</h3>
                        <p>应用主界面，提供导航和快速访问各个功能模块的入口。</p>
                    </div>
                    <div class="feature-card">
                        <h3>🩺 损伤评估 (Injury Assessment)</h3>
                        <p>智能评估用户的运动损伤情况，为制定康复计划提供科学依据。</p>
                    </div>
                    <div class="feature-card">
                        <h3>📚 康复资料库 (Rehabilitation Library)</h3>
                        <p>丰富的康复知识库，包含各种康复训练方法和理论指导。</p>
                    </div>
                    <div class="feature-card">
                        <h3>📋 我的康复计划 (My Rehabilitation Plans)</h3>
                        <p>个性化的康复训练计划管理，跟踪训练进度和效果。</p>
                    </div>
                </div>
            </div>
            
            <div id="structure" class="tab-content">
                <h2>📁 项目结构</h2>
                
                <div class="code-structure">
                    <div class="file-tree">
                        <div class="folder">📁 zuizhongban/</div>
                        <div style="margin-left: 20px;">
                            <div class="folder">📁 entry/</div>
                            <div style="margin-left: 20px;">
                                <div class="folder">📁 src/main/</div>
                                <div style="margin-left: 20px;">
                                    <div class="folder">📁 ets/pages/</div>
                                    <div style="margin-left: 20px;">
                                        <div class="file">📄 Index.ets - 主页面</div>
                                        <div class="file">📄 injuryAssessment.ets - 损伤评估页</div>
                                        <div class="file">📄 rehabilitationLibrary.ets - 康复资料库</div>
                                        <div class="file">📄 myRehabilitationPlans.ets - 康复计划页</div>
                                    </div>
                                    <div class="file">📄 module.json5 - 模块配置</div>
                                </div>
                                <div class="file">📄 build-profile.json5 - 构建配置</div>
                                <div class="file">📄 hvigorfile.ts - 构建脚本</div>
                            </div>
                            <div class="file">📄 build-profile.json5 - 项目构建配置</div>
                            <div class="file">📄 oh-package.json5 - 依赖管理</div>
                            <div class="file">📄 hvigorfile.ts - 项目构建脚本</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="status" class="tab-content">
                <h2>⚙️ 构建状态</h2>
                
                <div class="status-item status-success">
                    <span>✅ 代码语法检查</span>
                    <span class="badge badge-success">已完成</span>
                </div>
                
                <div class="status-item status-success">
                    <span>✅ JSON5配置文件修复</span>
                    <span class="badge badge-success">已完成</span>
                </div>
                
                <div class="status-item status-success">
                    <span>✅ TypeScript语法修复</span>
                    <span class="badge badge-success">已完成</span>
                </div>
                
                <div class="status-item status-warning">
                    <span>⚠️ HarmonyOS构建工具</span>
                    <span class="badge badge-warning">需要安装</span>
                </div>
                
                <div class="status-item status-error">
                    <span>❌ 项目依赖安装</span>
                    <span class="badge badge-error">等待ohpm</span>
                </div>
                
                <div class="status-item status-error">
                    <span>❌ 应用构建</span>
                    <span class="badge badge-error">等待环境</span>
                </div>
            </div>
        </div>
        
        <div class="status-section">
            <h2>📋 下一步操作指南</h2>
            <div class="feature-grid">
                <div class="feature-card">
                    <h3>1. 查看安装指导</h3>
                    <p>详细的HarmonyOS开发环境安装步骤</p>
                    <a href="./harmonyos_setup_guide.md" target="_blank">📖 查看安装指导</a>
                </div>
                <div class="feature-card">
                    <h3>2. 安装DevEco Studio</h3>
                    <p>从华为开发者官网下载并安装DevEco Studio IDE，这是HarmonyOS应用开发的官方工具。</p>
                    <a href="https://developer.harmonyos.com/cn/develop/deveco-studio" target="_blank">前往下载</a>
                </div>
                <div class="feature-card">
                    <h3>3. 配置SDK和工具</h3>
                    <p>在DevEco Studio中配置HarmonyOS SDK、ohpm等工具，包括API版本和构建工具。</p>
                </div>
                <div class="feature-card">
                    <h3>4. 导入项目</h3>
                    <p>将此项目导入到DevEco Studio中，IDE会自动处理依赖安装和构建配置。</p>
                </div>
                <div class="feature-card">
                    <h3>5. 运行调试</h3>
                    <p>连接HarmonyOS设备或使用模拟器来运行和调试应用。</p>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        function showTab(tabName) {
            // 隐藏所有标签内容
            const contents = document.querySelectorAll('.tab-content');
            contents.forEach(content => content.classList.remove('active'));
            
            // 移除所有标签的active类
            const tabs = document.querySelectorAll('.nav-tab');
            tabs.forEach(tab => tab.classList.remove('active'));
            
            // 显示选中的标签内容
            document.getElementById(tabName).classList.add('active');
            
            // 添加active类到点击的标签
            event.target.classList.add('active');
        }
    </script>
</body>
</html>